<!-- 右边侧边栏组件 -->
<template>
    <div id="container">
        <!-- 竞品信息盒子 -->
        <div id="info_box">
            <div id="pro_info_title">竞品信息</div>
            <div class="row_item1">竞品：{{ product_info.name }}</div>
            <div class="row_item1">底价:
                <span style="color: red;">￥{{ product_info.price }}</span>
            </div>
            <div class="row_item1">卖家：{{ product_info.ownerName }}</div>
            <div class="row_item1">加价幅度:
                <span style="color: red;">￥{{ product_info.incrementPrice }}</span>
            </div>
        </div>
        <!-- 拍卖队列盒子 -->
        <div id="auction_list">
            <div id="auction_list_title"> 竞品列表 </div>
            <div id="auction_list_show">
                <div class="auction_item" 
                        v-for="(item, index) in auctionProductList" 
                        :key="index" 
                        v-if="myFlag"
                        @click="selectAuctionProduct(item, index)"
                        :class="{itemActive: index == selectIndex}"
                        >
                    <!-- 图片&名称 -->
                    <div id="auctions_row1">
                        <div>
                            <img id="pro1" :src="baseUrl + '/commons/download?picName=' + item.pictureName" alt="竞品">
                        </div>
                        <div class="product_name">{{ item.name }}</div>
                    </div>
                    <!-- 底价 -->
                    <div id="auctions_price" class="row_item">
                        底价：{{ item.price }}
                    </div>
                    <!-- 状态 -->
                    <div id="auctions_status"  class="row_item">
                        状态：{{ statusFilter(item.status) }}
                    </div>
                    <!-- 卖家 -->
                    <div id="auctions_time"  class="row_item">
                        拍卖时间 <br>
                        {{ moment(item.auctionTime).format("YYYY-MM-DD HH:mm:SS") }}
                    </div>
                </div>
                <div style="height: 30px;"></div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, inject, reactive, ref, watch } from "vue";
import axios from 'axios';
import { AuctionProduct } from '../dto/AuctionProduct.ts';
import moment from "moment";
import { useAuctionStore } from '../stores/auction';

// 实例化自定义store，操作与auction相关数据
const auctionStore = useAuctionStore();

// 竞品信息列表
let auctionProductList = reactive<AuctionProduct[]>([]);
let baseUrl = inject<string>('apiBaseUrl'); // 请求根路径
let myFlag = ref<boolean>(false); // 竞品列表是否加载成功
let selectIndex = ref<number>(0); // 选中的索引
let product_info = reactive<AuctionProduct>(new AuctionProduct); // 选中的竞品信息

// 选择竞品触发
 function selectAuctionProduct(item: AuctionProduct, index: number): void{
    
    // 切换选中索引，样式变化
    selectIndex.value = index;
    // 将选中的竞品信息放到“竞品信息”框展示
    product_info = item;
    // 将选择的竞品数据存入pinia
    auctionStore.updateAuctionInfo(item);

    // 查看选择的竞品是否有竞拍过（根据id）
    // if(window.localStorage.getItem('aucProductId') == item.uid){
    //     auctionStore.upDateauctionHandleFlag(true);
    // }else{
    //     auctionStore.upDateauctionHandleFlag(false);
    // }
}

// 状态过滤器
function statusFilter(num: number): String {
    let text = "";
    switch (num) {
        case 0:
            text = "待拍卖";
            break;
        case 1:
            text = "正在拍卖";
            break;
        case 2:
            text = "已成交";
    };
    return text
}

// 获取竞品信息列表
async function getAuctionProductList() {
    console.log("==");
    
    const res = await axios.get(`${baseUrl}/auctionProducts/allAuction`);
    // 将状态为0或1的竞品信息赋值
    auctionProductList = res.data.data;
    myFlag.value = true;
    // 将竞品列表的第一项展示
    product_info =  auctionProductList[0];
    // 将第一项存入pinia
    auctionStore.updateAuctionInfo(auctionProductList[0]);
    // 手动切换到第一个,组件更新
    selectAuctionProduct(auctionProductList[0], 1);
    setTimeout(()=>{
        selectAuctionProduct(auctionProductList[0], 0);
    },)
}

// 监视拍卖开始标志
watch(()=>auctionStore.auctionFlag, ()=>{
    // 重新获取数据
    getAuctionProductList();
})

// 监视流拍标志
watch(()=>auctionStore.notAuctionFlag, ()=>{
    // 重新获取数据
    getAuctionProductList();
})

onMounted(() => {
    // 获取竞品信息列表
    getAuctionProductList();
})

</script>

<style scoped>
#auctions_row1 {
    display: flex;
    flex-direction: row;
    font-size: 15px;
}

#pro1 {
    width: 30px;
}

#container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#auction_list_title {
    text-align: center;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
    border-bottom: solid 1px #888787;
}

.auction_item {
    margin: 0 auto;
    margin-top: 5px;
    height: 120px;
    width: 95%;
    background-color: #9e4f4fee;
    border-radius: 10px;
    padding: 5px;
    color: aliceblue;
    font-size: 15px;
    cursor: pointer;
}

.product_name {
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 130px;
    display: inline-block;
    white-space: nowrap;
}

.itemActive{
    background-color: #863a3a;
}

#auctions_time{
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
    overflow: hidden;
}

.row_item{
    margin-top: 2px;
}

.row_item1{
    margin-top: 5px;
}

#info_box {
    height: 30%;
    width: 100%;
    background-color: #fbfae6;
    border-radius: 10px;
    padding: 5px;
    padding-top: 10px;
}

#auction_list {
    margin-top: 2px;
    background-color: #fbfae6;
    height: 70%;
    border-radius: 5px;
}

#auction_list_show {
    height:100%;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 11 */

}

#pro_info_title{
    text-align: center;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #d3d2d2;
}

#auction_list_show::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
</style>
